<template>
	<view  class="merchants-contant">
	
		<view class="all-follow">
			<view class="top-all" style="margin: 20rpx;">
				<view class="bussiness" :style="tab == 0 ? 'background-color: #F1EBFF;color: #7948EA;' : ''" @click="tabSwith(0)">所有商家</view>
				<view class="bussiness" :style="tab == 1 ?  'background-color: #F1EBFF;color: #7948EA;' : ''" @click="tabSwith(1)">我的关注</view>
			</view>
		</view>
	
		<view class="list-contant">
			<template v-for="(shop, index) in shopList" :key="index">
				<view class="all-list">
					<view class="merchants-name">
						<view class="meichants-name-left">
							<image class="" :src="shop.shop_img"></image>
							<text class="" >{{shop.shop_name}}</text>
						</view>
						<view class="meichants-name-right" @click="gotoBusinessDetail(shop)">
							<view class="btn-text">进店看看</view>
						</view>
					</view>
					
					<view class="merchants-cover">
						
						<template v-for="(goods, index) in shop.box_info" :key="index">
							<view class="cover-list">
								<view class="cover-img">
									<image :src="goods.img" class=""></image>
									<view class="img-text">{{goods.type == 1? '天选' : goods.type == 3? '福袋' : ''}}</view>
								</view>
								<view class="cover-tit">
									<text class="">{{ goods.name }}</text>
									<text class="cover-money">￥{{goods.price}}</text>
								</view>
							</view>
						</template>
					</view>
				</view>		
			</template>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { http } from '@/utils/http.js'
	import { onLoad, onShow,onReachBottom } from '@dcloudio/uni-app'
    import { useUsercodeStore } from '@/store/usercode.js'

	const userCodeStore = useUsercodeStore()
	const shopList = ref([])
	const currentPage = ref(1)
	const canLoadMore = ref(true)
	const tab = ref(0)
	async function getList() {
		let params = {page:currentPage.value,limit:10};
		
		if (tab.value == 1) {
			params.focus = 1
		}
		const res = await http.request({
			url: '/api/shop/shopList',
			method: 'POST',
			data: params
		})
		console.log(res)
		if (res.st == 1) {
			if (res.data.length < 10) {
				canLoadMore.value = false
			}
			shopList.value = [...shopList.value, ...res.data]
		}else {
			canLoadMore.value = false
		}

	}

	function tabSwith(index){
		if(index == 1){
			if (
				userCodeStore.usercode.token == '' ||
				userCodeStore.usercode.userId == ''
			) {
				uni.utils.toast('为了让您有更好的体验，请先登录')
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/login/login`,
					})
				}, 2000)
				return
			}
		}
		tab.value = index
		clearData()
		clearParams()
		getList()
	}
	
	// 上拉加载
	onReachBottom(() => {
		if(canLoadMore.value){
			currentPage.value++
			getList()
		}
	})

	async function clearParams(){
		canLoadMore.value = true;
	}

	async function clearData(){
		shopList.value = []
		currentPage.value = 1
	}


	onShow(() => {
		clearData();
		clearParams();
		getList()
	})

	onLoad(() => {
	})
	
	function gotoBusinessDetail(item) {
		uni.navigateTo({
			url: `/shopPage/shopDetail/bussiness-detail?id=${item.id}`,
		})
	}
	
</script>

<style lang="scss" scoped>

.merchants-contant {
		background-color: #E9EAF2;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		
	}
	.all-follow{
		width:710rpx ;
		height: 100rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin: 20rpx auto;
		font-size: 32rpx;
		font-weight: 600;
		.top-all{
			display: flex;
			justify-content: space-evenly;
		}
		
		.bussiness{
			width: 144rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			border-radius: 14rpx;
			
		}
		
	}
	.list-contant{
		display: flex;
		flex-direction: column;
		margin:10rpx  auto;
		padding-bottom: 50rpx;
		}
	.all-list{
		width: 710rpx;
		height: 381rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.merchants-name{
		display: flex;
		margin: 30rpx ;
		.meichants-name-left{
			display: flex;
			width: 50%;
			line-height: 70rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			image{
				width: 70rpx;
				height: 70rpx;
				margin-right: 20rpx;
			}
		}
		.meichants-name-right{
			width: 50%;
			display: flex;
			justify-content: flex-end;
			.btn-text{
				width: 134rpx;
				height: 70rpx;
				background-color: #F1EBFF;
				color: #7948EA;
				font-size: 28rpx;
				
				line-height:70rpx ;
				text-align: center;
				border-radius: 14rpx;
				font-weight: 600;
			}
			
		}
		
	}
	.merchants-cover{
		display: flex;
		// flex-direction: column;
		width: 650rpx;
		overflow: hidden;
		margin-left: 20rpx;
		margin-right: 30rpx;
		overflow: scroll;
		
		
		// overflow-x: hidden;
		.cover-list{
			display: flex;
			flex-direction: column;
			width: 53%;
			padding-right: 40rpx;
			.cover-img{
				position: relative;
				image{
					width: 364rpx;
					height: 184rpx;
					border-radius: 10rpx;
					border: 4rpx solid #00BAAD;
				}
				.img-text{
					width: 66rpx;
					height: 42rpx;
					border-radius: 6rpx;
					background-color: #fff;
					border: 2rpx solid #C1A6FF;
					position: absolute;
					top: 6rpx;
					left: 9rpx;
					font-size: 20rpx;
					color: #7948EA;
					line-height: 42rpx;
					text-align: center;
				}
			}
		}
		.cover-tit{
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			.cover-money{
				font-size: 20rpx;
			}
		}
	}

</style>
